<template>
    <basic-container>
        <avue-crud
                :option="option"
                :table-loading="loading"
                :data="data"
                v-model:page="page"
                ref="crud"
                @row-del="rowDel"
                v-model="form"
                :permission="permissionList"
                @row-update="rowUpdate"
                @row-save="rowSave"
                :before-open="beforeOpen"
                @search-change="searchChange"
                @search-reset="searchReset"
                @selection-change="selectionChange"
                @current-change="currentChange"
                @size-change="sizeChange"
                @refresh-change="refreshChange"
                @on-load="onLoad"
        >
            <template #menu-left>
                <el-button
                        type="danger"
                        icon="el-icon-delete"
                        plain
                        v-if="permissionList.editBtn"
                        @click="handleDelete"
                >删 除
                </el-button>
                <el-button
                        type="primary"
                        icon="el-icon-download"
                        @click="handleExport"
                >导出
                </el-button>
            </template>
            <template #="{ row }">
                <el-tag>{{ row.categoryName }}</el-tag>
            </template>
        </avue-crud>
        <list-and-form_-modal-form ref="modalForm"></list-and-form_-modal-form>
    </basic-container>
</template>

<script>
    import {ListMixin} from "@/mixins/ListMixin";
    import ListAndForm_ModalForm from "./list_and_form__modal_form.vue"

    export default {
        data() {
            return {
                option: {
                    height: 'auto',
                    calcHeight: 32,
                    dialogWidth: 950,
                    tip: false,
                    searchShow: true,
                    searchMenuSpan: 6,
                    border: true,
                    index: true,
                    viewBtn: true,
                    selection: true,
                    excelBtn: true,
                    dialogClickModal: false,
                    column: [
                        {
                            label: '通知标题',
                            prop: 'title',
                            span: 24,
                            row: true,
                            search: true,
                            rules: [
                                {
                                    required: true,
                                    message: '请输入通知标题',
                                    trigger: 'blur',
                                },
                            ],
                        },
                        {
                            label: '通知类型',
                            type: 'select',
                            dicUrl: '/blade-system/dict/dictionary?code=notice',
                            props: {
                                label: 'dictValue',
                                value: 'dictKey',
                            },
                            dataType: 'number',
                            slot: true,
                            prop: 'category',
                            search: true,
                            rules: [
                                {
                                    required: true,
                                    message: '请输入通知类型',
                                    trigger: 'blur',
                                },
                            ],
                        },
                        {
                            label: '通知时间',
                            prop: 'releaseTimeRange',
                            type: 'datetime',
                            format: 'YYYY-MM-DD HH:mm:ss',
                            valueFormat: 'YYYY-MM-DD HH:mm:ss',
                            searchRange: true,
                            hide: true,
                            addDisplay: false,
                            editDisplay: false,
                            viewDisplay: false,
                            search: true,
                            rules: [
                                {
                                    required: true,
                                    message: '请输入通知时间',
                                    trigger: 'blur',
                                },
                            ],
                        },
                        {
                            label: '通知日期',
                            prop: 'releaseTime',
                            type: 'date',
                            format: 'YYYY-MM-DD HH:mm:ss',
                            valueFormat: 'YYYY-MM-DD HH:mm:ss',
                            rules: [
                                {
                                    required: true,
                                    message: '请输入通知日期',
                                    trigger: 'click',
                                },
                            ],
                        },
                        {
                            label: '通知内容',
                            prop: 'content',
                            component: 'avue-ueditor',
                            options: {
                                action: '/blade-resource/oss/endpoint/put-file',
                                props: {
                                    res: 'data',
                                    url: 'link',
                                },
                            },
                            hide: true,
                            minRows: 4,
                            span: 24,
                        },
                    ],
                },

                // 配置项
                listMixinConfig: {
                    // 对应的api目录下 js文件
                    api: "demo/demo_api", // == @/api/demo/demo_api.js
                },
            };
        },
        components: {
            ListAndForm_ModalForm
        },
        mixins: [ListMixin],
        computed: {
            permissionList() {
                return {
                    // 默认 四个为false, 需自行绑定设置
                    addBtn: this.validData(this.permission.notice_add, false),
                    viewBtn: this.validData(this.permission.notice_view, false),
                    delBtn: this.validData(this.permission.notice_delete, false),
                    editBtn: this.validData(this.permission.notice_edit, false),
                };
            },
        },
        methods: {
            // beforeOpen(done, type) {
            //     let title = "";
            //     if (['edit', 'view'].includes(type)) {
            //         title = "编辑/修改"
            //     } else {
            //         title = "新增"
            //     }
            //     this.$refs.modalForm.show({
            //         title,
            //         type,
            //         id: this.form.id
            //     })
            // }
            detailAfter(type) {
                let title = "";
                if (['edit', 'view'].includes(type)) {
                    title = "编辑/修改"
                } else {
                    title = "新增"
                }
                this.$refs.modalForm.show({
                    title,
                    type,
                    data: this.form
                });
                return true
            }
        }
    };
</script>

<style></style>
